/*explain：;@author: wxm; @version: 1.0; date: 2021/6/9;*/
import { h } from '@logicflow/core';
import { RectResize } from '@logicflow/extension';

// 自定义节点的 model
class Model extends RectResize.model{
    //自定义节点的样式
    setAttributes() {
        const size = 100;
        this.width = size; //width	number	✅	节点宽度
        this.height = size; //height	number	✅	节点高度
        this.fill = '#5F9EA0'; //fill	color	✅	节点填充颜色
        this.fillOpacity = 1; //fillOpacity	number	✅	节点填充颜色透明度
        this.stroke = "#588811"; // stroke	color	✅	节点边框颜色
        this.strokeOpacity = 1; //strokeOpacity	number	✅	节点边框颜色透明度
        this.strokeWidth = 1; // strokeWidth	number	✅	节点边框宽度
        this.opacity = 1; //opacity	number	✅	节点整体透明度
        this.outlineColor = '#00008B' //outlineColor	color	✅	外框颜色
        this.hoverOutlineColor = '#008000' // hoverOutlineColor	color	✅	hover外边框颜色
        this.outlineStrokeDashArray = ''; //控制用来描外边框的点划线的图案范式, 设置为空是为实线
        this.hoverOutlineStrokeDashArray = ''; //控制用来描hover外边框的点划线的图案范式, 设置为空是为实线

        //矩形节点特有
        this.radius = 5;//radius	number	✅	矩形圆角

        //矩形节点特有
        this.radius = 5;//radius	number	✅	矩形圆角

        // 设置自定义锚点
        // 只需要为每个锚点设置相对于节点中心的偏移量
        this.anchorsOffset = [
            [size / 2, 0], // x 轴上偏移 size / 2
            [-size / 2, 0], // x 轴上偏移 -size / 2
        ];
    }
    //设置连线规则
    getConnectedTargetRules() {
        const rules = super.getConnectedTargetRules();
        const notAsTarget = {
            message: '禁止自己连自己',
            validate: (source,target) => {
                return source.id !== target.id;
            },
        };
        rules.push(notAsTarget);
        return rules;
    }
}

// 自定义节点的 view
class View extends RectResize.view{
    getResizeShape() {
        // 通过 getAttributes 获取 model 中的属性
        const { x, y, width, height, fill, stroke, strokeWidth, radius } = this.getAttributes();
        const attrs = {
            // rect 标签的 x，y 对应的是图形的左上角
            // 所以我们要将矩形的中心移动到 x，y
            x: x - width / 2,
            y: y - height / 2,
            width,
            height,
            stroke,
            fill,
            strokeWidth,
            rx: radius,
            ry: radius,
        }
        // getShape 的返回值是一个通过 h 方法创建的 svg 元素
        return h("g", {}, [
                h("rect", { ...attrs }),
                h(
                    'svg',
                    {x: x - width / 2 + 5, y: y - height / 2 + 5, width: 25, height: 25, viewBox: "0 0 1274 1024",},
                    h('path', {fill: stroke, d: "M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z"})
                ),
            ]
        );

    }
}

export function registerMyRectNodeModel(lf){
    lf.register({type:"my-rect",view:View,model:Model})
}
